<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<base href="" />
		<link href="favicon.ico" rel="shortcut icon" />
		<title>Google Maps jQuery Plugin</title>
		<meta name="robots" content="index,follow">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		
        <!-- The Needs -->
			
		<!-- ! The Plugin Stylesheet, needed -->
		<link rel="stylesheet" type="text/css" href="./css/jquery.googlemaps.css" title="style" />

		
		<!-- ! jQuery latest, here: 1.9.1., needed -->
		<script type="text/javascript" src="./js/jquery.min.js"></script>
		

		<!-- End Needs -->
		
		<!-- Example Page Java Script, not needed -->
		<script type="text/javascript" src="./js/assets/page.js"></script>
		
		<script type="text/javascript" src="./js/assets/google-code-prettify/prettify.js"></script>
        
		<!-- Additional Stylesheets, not needed -->
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,800,300" title="style" />
        <link rel="stylesheet" type="text/css" href="./css/assets/bootstrap.min.css" title="style" />
        <link rel="stylesheet" type="text/css" href="./css/assets/font-awesome.min.css" title="style" />
        <link rel="stylesheet" type="text/css" href="./css/assets/prettify.css" title="style" />
        <!-- end Additional Stylesheets -->
        
        <!-- ! Example CSS Stuff, not needed -->
        <link rel="stylesheet" type="text/css" href="./css/assets/page.css" title="style" />
        
	</head>
	<body>
	    <div class="page-navrow">
    <div class="container ">
        <ul class="navigation">
            <li><a href="./" class="active">Top</a></li>
            <li><a href="#files" data-element="files">Files</a></li>
            <li><a href="#einbindung" data-element="einbindung">Einbindung</a></li>
            <li><a href="#markup" data-element="markup">Markup</a></li>
            <li><a href="#erste-schritte" data-element="erste-schritte">Erste Schritte</a></li>
            <li><a href="#function-reference" data-element="function-reference">Function Referenz</a></li>
            <li><a href="#options" data-element="options">Options</a></li>
            <li><a href="#options-reference" data-element="options-reference">Options Referenz</a></li>
            <li><a href="#map-data" data-element="map-data">Map Data</a></li>
            <li><a href="#map-data-reference" data-element="map-data-reference">Map Data Referenz</a></li>
            <li><a href="#css" data-element="css">CSS</a></li>
        </ul>    
    </div>
</div>
<script>

    jQuery( document ).ready(function() {
        
        // scroll behavior, delayed
        function scrolled() {
            Page.scroll = $(this).scrollTop();
            $(this).off('scroll')[0].setTimeout(function(){
               Page.setNavRowActive();
               $(this).on('scroll',scrolled);
            }, 50);
        };
        
        //     
        jQuery(window).on('scroll',scrolled);
        
        //           
        Page.addNavRowBehavior();
        
        //
        setTimeout(function(){
            Page.scrollToRow(false);
        },500);
        
    });
    
    var Page = {
        offset_fixed : 0,
        offset_range : 100, // pixel
        scroll_offset : -10,
        scroll : 0,
        
        setNavRowActive : function() {
            var top             = 0;
            Page.offset_fixed   = $('.navigation').outerHeight(); 
            
            var rows = $('div[data-element]');
            var diff_out = '';
            
            for(var i=0; i<rows.length; i++){
                var item    = rows[i];
                var offset  = jQuery(item).offset();
                
                if (!offset)
                    return;
                
                var top     = offset['top'];
                top         = parseInt(top);                
                var diff    = parseInt(Page.scroll) - top + Page.offset_fixed;
                
                if(diff>=-Page.offset_range && diff <= Page.offset_range) {
                    jQuery(".page-navrow a").removeClass('active');

                    var element = jQuery(item).attr('data-element');
                    var target  = jQuery(".page-navrow [data-element='"+element+"']");
                    window.location.hash = element;
                    target.addClass('active');
                } else {
                    
                }
            }
        },
        
        addNavRowBehavior : function(){
            jQuery('.page-navrow ul li a').on('click',function(e){
                Page.offset_fixed = jQuery('.page-navrow').outerHeight(); 
                var element = jQuery(this).attr('data-element');
                Page.scrollToRow(element);
            });
            
        },
        
        scrollToRow : function(element){
            if(element==false)
                element = window.location.hash.replace('#','');
 
            Page.offset_fixed = $('.navigation').outerHeight();
                
            var to_row  = jQuery(".panel[data-element='"+element+"']");
            var offset  = to_row.offset();
            if(!offset)
                return;
                
            var scroll_to = offset.top - Page.offset_fixed + Page.scroll_offset;
            window.location.hash = element;
            
            jQuery('html,body').animate({ 
                                            scrollTop : scroll_to
                                                
                                        }, 1000);
        }
    }

</script>
		<div class="page index">
		    <div class="container">

		        <div class="col-xs-12">
	            <a href="jquery.googlemaps.latest.zip" class="btn btn-success fltr mt" target="_blank"><i class="fa fa-arrow-circle-down"></i> Download <b>jquery.googlemaps.latest.zip</b></a>            
		           <h1>Google Maps jQuery Plugin</h1>
		           <div class="panel panel-default">
 
                        <div class="panel-body header-image">
                            <div class="inner row-fluid">
                                <div class="col-xs-6">
                                    <div class="well">
                                        <b>Features</b><br />
                                        <ul>
                                            <li>simpel und schnell Google Maps Karten erzeugen</li>
                                            <li>umfangreiche Anpassungsmöglichkeiten</li>
                                            <li>Aussehen der Maps individualisierbar</li>
                                            <li>Eigene Steuerelemente (Karte bewegen und Zoom)</li>
                                            
                                        </ul>
                                    </div>
                                    
                                </div>
                                <div class="col-xs-6">
                                    <div class="well">
                                        <b>Beispiele</b><br />
                                        <a href="default.html">Grundeinstellung (Default)</a><br />
                                        <a href="customize.html">XHR mit verschiedenen Marker-Icons</a><br />
                                        <a href="customize_a.html">Noch andere Marker</a><br />
                                        <a href="customize_b.html">Von außerhalb der Map auf die Marker zugreifen</a><br />
                                        <a href="customize_c.html">Hover und Klick öffnet verschiedene Infoboxen</a><br />
                                        <br />
                                    </div>
                                    <div class="well">
                                        <b>Ressourcen</b><br />
                                        <a href="https://code.google.com/p/seek-g-mapper/source/checkout" target="_blank">SVN Repository bei Google Code</a><br />
                                        <a href="http://jquery.com/download/" target="_blank">jQuery 1.9.1.</a><br />
                                        <a href="https://developers.google.com/maps/documentation/javascript/reference" target="_blank">Google Maps Api Reference</a><br />
                                        <a href="http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html" target="_blank">Google Maps Style Wizard</a><br />
                                        <a href="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html" target="_blank">Google Maps Infobox Reference</a><br />
                                    </div>
                                    
                                </div>
                                <div class="col-xs-4">
                                    
                                </div>
                                
                            </div>
                        </div>
                   </div>
		           <div class="panel panel-default" data-element="files">
                        <div class="panel-heading">
                            Files
                        </div>
                        <div class="panel-body">
<pre class="prettyprint linenums lang-js">
css / jquery.googlemaps.css
    
js / infobox.js
js / jquery.googlemaps.js

images / arrow-infowindow-right.gif
images / infobox-close-icon.png
images / infobox-triangl-to-left.png
images / map-controls-move.png
images / map-controls-zoom-in.png
images / map-controls-zoom-out.png
images / marker_customize.png
images / marker_minus.png
images / marker_plus_large_png
images / marker_plus.png</pre>
                        </div>
                    </div>
                    <div class="panel panel-default" data-element="einbindung">
                        <div class="panel-heading">
                            Einbindung
                        </div>
                        <div class="panel-body">
<pre class="prettyprint linenums lang-html">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;./css/jquery.googlemaps.css&quot; title=&quot;style&quot; /&gt;

&lt;script type=&quot;text/javascript&quot; src=&quot;https://maps.googleapis.com/maps/api/js?sensor=false&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;./js/infobox.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;./js/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;./js/jquery.googlemaps.js&quot;&gt;&lt;/script&gt;</pre>
                        </div>
                    </div>
                    <div class="panel panel-default" data-element="markup">
                        <div class="panel-heading">
                            Markup
                        </div>
                        <div class="panel-body">
<pre class="prettyprint linenums lang-html">
&lt;div class=&quot;mapbox&quot; id=&quot;mapbox&quot;&gt;&lt;/div&gt;
</pre>
                        </div>
                    </div>
                    <div class="panel panel-default"  data-element="erste-schritte">
                        <div class="panel-heading">
                            Erste Schritte
                        </div>
                        <div class="panel-body">
<h3>Grundsätzlich</h3>
<pre class="prettyprint linenums lang-js">
var mapbox;
        
$(window).on('ready',function(){
    mapbox = $('#mapbox').googleMapsTools ( options );
});
</pre>

<h3 class="mlt">Oder</h3>
<pre class="prettyprint linenums lang-js">
var mapbox;
        
$(window).on('ready',function(){
    mapbox = $('#mapbox').googleMapsTools ( {
        data        : mapdata,                      // the map data
        infoBox     : {
             openOn              : 'click',
             closeOnClickOutside : true
        }
    });
});
</pre>                        </div>
                    </div>
                    <div class="panel panel-default" data-element="function-reference">
                        <div class="panel-heading">
                            Function Referenz
                        </div>
                        <div class="panel-body">
<h3>.init( options )</h3>
<pre class="prettyprint linenums lang-js">
mapbox.init( options );
</pre>
<div class="well">
    <i>param</i> <b>options</b> Object, siehe Options<br />
    Wird automatisch beim Instanzieren ausgeführt. Ein erneut ausgeführtes Init ohne Options verwendet die zuvor gesetzten Options.
</div>

<h3>.destroy()</h3>
<pre class="prettyprint linenums lang-js">
mapbox.destroy();
</pre>
<div class="well">
    Löscht die entsprechende Map und alle Event-Listener.
</div>

<h3>.setOpt( options )</h3>
<pre class="prettyprint linenums lang-js">
mapbox.setOpt( options );
</pre>
<div class="well">
    <i>param</i> <b>options</b>, Object, siehe Options<br />
    Setzt nachträglich bestimmte Optionen. Ein Init ohne Optionen verwendet zuvor gesetztes setOpt().
</div>

<h3>.setStyle( mapStyle )</h3>
<pre class="prettyprint linenums lang-js">
mapbox.setStyle( mapStyle );
</pre>
<div class="well">
    <i>param</i> <b>mapStyle</b> Array<br />
    Setzt nachträglich einen Style für eine Styled Map. Hier kann zur Datenerzeugung der <a href="http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html" target="_blank" class="btn btn-xs btn-primary">Google Maps Style Wizard</a> verwendet werden.
</div>

<h3>.addMarker()</h3>
<pre class="prettyprint linenums lang-js">
mapbox.addMarker();
</pre>
<div class="well">
    @TODO
</div>

<h3>.moveTo()</h3>
<pre class="prettyprint linenums lang-js">
mapbox.moveTo();
</pre>
<div class="well">
    @TODO
</div>

<h3>.zoomTo()</h3>
<pre class="prettyprint linenums lang-js">
mapbox.zoomTo();
</pre>
<div class="well">
    @TODO
</div>

<h3>.hideAllInfoBoxes()</h3>
<pre class="prettyprint linenums lang-js">
mapbox.hideAllInfoBoxes();
</pre>
<div class="well">
    Schliesst unverzügliche alle Infoboxen.
</div>

<h3>.showAllInfoBoxes()</h3>
<pre class="prettyprint linenums lang-js">
mapbox.showAllInfoBoxes();
</pre>
<div class="well">
    Zeigt alle Infoboxen und zoomt zur letzten.
</div>


<h3>.getOptions()</h3>
<pre class="prettyprint linenums lang-js">
mapbox.getOptions();
</pre>
<div class="well">
    <i>return</i> <b>object</b><br />
    Alle aktiven Optionen. Merge der Defaults und der Parameter.
</div>

<h3>.getDefaults()</h3>
<pre class="prettyprint linenums lang-js">
mapbox.getDefaults();
</pre>
<div class="well">
    <i>return</i> <b>object</b><br />
    Nur die Plugin Defaults.
</div>

<h3>.getParams()</h3>
<pre class="prettyprint linenums lang-js">
mapbox.getParams();
</pre>
<div class="well">
    <i>return</i> <b>object</b><br />
    Nur Init Parameter
</div>

<h3>.getMarkers()</h3>
<pre class="prettyprint linenums lang-js">
mapbox.getMarkers();
</pre>
<div class="well">
    <i>return</i> <b>object</b><br />
    Alle Marker
</div>

<h3>.countMarkers()</h3>
<pre class="prettyprint linenums lang-js">
mapbox.countMarkers( index );
</pre>
<div class="well">
    <i>return</i> <b>integer</b><br />
    Anzahl der Marker
</div>

<h3>.openMarker( index, event, center )</h3>
<pre class="prettyprint linenums lang-js">
mapbox.openMarker( index, event, center );
</pre>
<div class="well">
    Zeigt die Infobox eines Markers.<br />
    <br />
    
    <i>param</i> <b>index</b>  ist der Index des Markers <span class="code">marker.index</span><br />
    <i>param</i> <b>event</b>   ist <span class="code">click</span> oder <span class="code">hover</span><br />
    <i>param</i> <b>center</b>   ist <span class="code">true</span> oder <span class="code">false</span> und zentriert die Karte am Marker<br />
    <br />
    <i>return</i> <b>object</b><br />
</div>
                        </div>
                    </div>
                    <div class="panel panel-default" data-element="options">
                        <div class="panel-heading">
                            Options (defaults)
                        </div>
                        <div class="panel-body">
<pre class="prettyprint linenums lang-js">
var options = {
    &quot;data&quot;                              : mapdata,
    &quot;name&quot;                              : &quot;GMap&quot;,
    &quot;imagePath&quot;                         : &quot;images/&quot;,
    &quot;markerIcon&quot;                        : &quot;marker_plus.png&quot;,
    &quot;startPoint&quot;                        : {
        &quot;lat&quot;: 50.666872,
        &quot;lng&quot;: 10.19165
    },
    &quot;startZoom&quot;                         : 5,
    &quot;maxZoom&quot;                           : 8,
    &quot;minZoom&quot;                           : 2,
    &quot;mapStyles&quot;                         : [],
    &quot;centerOpenInfoboxOnWindowResize&quot;   : true,
    &quot;disableCustomControls&quot;             : false,
    &quot;disableDefaultUI&quot;                  : true,
    &quot;streetViewControl&quot;                 : false,
    &quot;mapTypeControl&quot;                    : false,
    &quot;mapTypeId&quot;                         : &quot;hybrid&quot;,
    &quot;scrollWheel&quot;                       : false,
    &quot;infoBox&quot;: {
        &quot;offsetX&quot;                           : 10,
        &quot;offsetY&quot;                           : -78,
        &quot;disableAutoPan&quot;                    : false,
        &quot;zIndex&quot;                            : 1000,
        &quot;boxClass&quot;                          : &quot;infobox&quot;,
        &quot;boxClickClass&quot;                     : false,
        &quot;boxHoverClass&quot;                     : false,
        &quot;closeBoxMargin&quot;                    : 0,
        &quot;closeIcon&quot;                         : &quot;infobox-close-icon.png&quot;,
        &quot;isHidden&quot;                          : false,
        &quot;pane&quot;                              : &quot;floatPane&quot;,
        &quot;enableEventPropagation&quot;            : false,
        &quot;openOn&quot;                            : &quot;click&quot;,
        &quot;click&quot;                             : false,
        &quot;hover&quot;                             : false,
        &quot;closeOnClickOutside&quot;               : true,
        &quot;centerMapOnShow&quot;                   : false,
        &quot;content&quot;                           : false,
        &quot;templates&quot;                         : {
            &quot;triangle&quot;: &quot;&lt;div class=&quot;triangle&quot;&gt;&lt;/div&gt;&quot;,
            &quot;heading&quot;: &quot;&lt;h2&gt;%%name%%&lt;/h2&gt;&quot;,
            &quot;text&quot;: &quot;&lt;div class=&quot;text&quot;&gt;%%text%%&lt;/div&gt;&quot;,
            &quot;row&quot;: &quot;&lt;a href=&quot;%%src%%&quot; %%external%% class=&quot;map-popover-link&quot;&gt;%%text%%&lt;/a&gt;&quot;,
            &quot;footer&quot;: &quot;&quot;,
            &quot;xhrBody&quot;: &quot;%%content%%&quot;
          }
    },
    &quot;templateMapControls&quot;                   : {
        &quot;body&quot;: &quot;&lt;div class=&quot;custom-controls&quot;&gt;%%content%%&lt;/div&gt;&quot;,
        &quot;move&quot;: &quot;&lt;div class=&quot;move&quot;&gt;&lt;a href=&quot;javascript:;&quot; class=&quot;toleft&quot;&gt;&lt;/a&gt;&lt;a href=&quot;javascript:;&quot; class=&quot;toright&quot;&gt;&lt;/a&gt;&lt;a href=&quot;javascript:;&quot; class=&quot;toup&quot;&gt;&lt;/a&gt;&lt;a href=&quot;javascript:;&quot; class=&quot;todown&quot;&gt;&lt;/a&gt;&lt;/div&gt;&quot;,
        &quot;zoom&quot;: &quot;&lt;div class=&quot;zoom&quot;&gt;&lt;a href=&quot;javascript:;&quot; class=&quot;zoom-in&quot;&gt;&lt;/a&gt;&lt;a href=&quot;javascript:;&quot; class=&quot;zoom-out&quot;&gt;&lt;/a&gt;&lt;/div&gt;&quot;,
        &quot;type&quot;: &quot;&quot;
    },
    &quot;places&quot;: mapdata.places
}</pre>
                        </div>
                    </div>
                    <div class="panel panel-default" data-element="options-reference">
                        <div class="panel-heading">
                            Options Referenz
                        </div>
                        <div class="panel-body reference">
<div class="row">
    <div class="alert alert-info pb">
        <h3>Attribut</h3>
        <span class="code pl">Datentyp</span>
        <div class="well">
            Options entspricht Defaults<br />
            Map Init Parameter (Options) überschreiben Map Defaults<br />
            Map Data Settings überschreiben Map Init Parameter (Options) und Map Defaults<br />
            kein <span class="code">$.extend()</span> bei <span class="code">.mapStyles</span>, Feld wird komplett überschrieben<br />
        </div>
        <span class="code pl">Defaults</span>
    </div>
</div>

<div class="row-fluid">
    <h3>options.data</h3>
    <pre class="prettyprint linenums lang-js">
array, Json</pre>
    <div class="well">
        Die Karten-Daten als Json
    </div>
    <pre class="prettyprint linenums lang-js">siehe mapdata</pre>
</div>

<div class="row-fluid">
    <h3>options.name</h3>
    <pre class="prettyprint linenums lang-js">
string</pre>
    <div class="well">
        Der Name (Label) der Map
    </div>
    <pre class="prettyprint linenums lang-js">"GMap"</pre>
</div>

<div class="row-fluid">
    <h3>options.imagePath</h3>
    <pre class="prettyprint linenums lang-js">
string</pre>
    <div class="well">
        Der relative oder absolute Pfad aller Marker
    </div>
    <pre class="prettyprint linenums lang-js">"images/"</pre>
</div>

<div class="row-fluid">
    <h3>options.markerIcon</h3>
    <pre class="prettyprint linenums lang-js">
string</pre>
    <div class="well">
        Standard Marker-Icon Bild
    </div>
    <pre class="prettyprint linenums lang-js">"marker_plus.png"</pre>
</div>

<div class="row-fluid">
    <h3>options.startPoint</h3>
    <pre class="prettyprint linenums lang-js">
object</pre>
    <div class="well">
        Startpunkt nach Init 
    </div>
    <pre class="prettyprint linenums lang-js">{
    "lat": 50.666872,
    "lng": 10.19165
}</pre>
</div>

<div class="row-fluid">
    <h3>options.startZoom</h3>
    <pre class="prettyprint linenums lang-js">
integer</pre>
    <div class="well">
        Zoomstufe bei Init 
    </div>
    <pre class="prettyprint linenums lang-js">5</pre>
</div>

<div class="row-fluid">
    <h3>options.startZoom</h3>
    <pre class="prettyprint linenums lang-js">
integer</pre>
    <div class="well">
        Maximale Zoomstufe, rauszoomen 
    </div>
    <pre class="prettyprint linenums lang-js">8</pre>
</div>

<div class="row-fluid">
    <h3>options.minZoom</h3>
    <pre class="prettyprint linenums lang-js">
integer</pre>
    <div class="well">
        Minimale Zoomstufe, reinzoomen 
    </div>
    <pre class="prettyprint linenums lang-js">2</pre>
</div>

<div class="row-fluid">
    <h3>options.centerOpenInfoboxOnWindowResize</h3>
    <pre class="prettyprint linenums lang-js">
boolean</pre>
    <div class="well">
        Zentriert die Karte beim offenen Marker, wenn das Fenster skaliert wird 
    </div>
    <pre class="prettyprint linenums lang-js">true</pre>
</div>

<div class="row-fluid">
    <h3>options.disableCustomControls</h3>
    <pre class="prettyprint linenums lang-js">
boolean</pre>
    <div class="well">
        Deaktiviert Custom Controls 
    </div>
    <pre class="prettyprint linenums lang-js">false</pre>
</div>

<div class="row-fluid">
    <h3>options.disableDefaultUI</h3>
    <pre class="prettyprint linenums lang-js">
boolean</pre>
    <div class="well">
        Deaktiviert Controls von Goole 
    </div>
    <pre class="prettyprint linenums lang-js">true</pre>
</div>

<div class="row-fluid">
    <h3>options.streetViewControl</h3>
    <pre class="prettyprint linenums lang-js">
boolean</pre>
    <div class="well">
        Aktiviert Streetview grundstätzlich und zeigt Controls (links oben)
    </div>
    <pre class="prettyprint linenums lang-js">false</pre>
</div>

<div class="row-fluid">
    <h3>options.mapTypeControl</h3>
    <pre class="prettyprint linenums lang-js">
boolean</pre>
    <div class="well">
        Controls zum Umstellen zwischen Satellitenbild und Custom Map
    </div>
    <pre class="prettyprint linenums lang-js">false</pre>
</div>

<div class="row-fluid">
    <h3>options.mapTypeId</h3>
    <pre class="prettyprint linenums lang-js">
string</pre>
    <div class="well">
        mapTypeId von Google Maps, <a href="https://developers.google.com/maps/documentation/javascript/maptypes" class="btn btn-xs btn-primary" target="_blank">Google Docu</a>
    </div>
    <pre class="prettyprint linenums lang-js">"hybrid"</pre>
</div>

<div class="row-fluid">
    <h3>options.scrollWheel</h3>
    <pre class="prettyprint linenums lang-js">
boolean</pre>
    <div class="well">
        Aktiviert / Deaktiviert das Scrollrad an der Maus
    </div>
    <pre class="prettyprint linenums lang-js">false</pre>
</div>


<div class="row-fluid">
    <h3>options.mapStyles</h3>
    <pre class="prettyprint linenums lang-js">
array</pre>
    <div class="well">
        Format Styled Maps, Google Maps Style Wizard 
    </div>
    <pre class="prettyprint linenums lang-js">[{
    "featureType" : "water",
    "stylers" : [{
        "color" : "#b3d0de"
    }]
}, {
    "featureType" : "landscape",
    "stylers" : [{
        "color" : "#ffffff"
    }]
}, {
    "featureType" : "road",
    "stylers" : [{
        "visibility" : "off"
    }]
}, {
    "featureType" : "transit",
    "stylers" : [{
        "visibility" : "off"
    }]
}, {
    "featureType" : "landscape.natural.terrain",
    "elementType" : "geometry",
    "stylers" : [{
        "visibility" : "off"
    }]
}, {
    "featureType" : "administrative.province",
    "stylers" : [{
        "visibility" : "off"
    }]
}, {
    "featureType" : "poi",
    "stylers" : [{
        "visibility" : "off"
    }]
}, { }]</pre>
</div>

<div class="row-fluid">
    <h3>options.infoBox</h3>
    <pre class="prettyprint linenums lang-js">
object</pre>
    <div class="well">
        Das Options-Objekt für die Infobox
    </div>
    <pre class="prettyprint linenums lang-js">{}</pre>
</div>

<div class="row-fluid level2">
    <h3>options.infoBox.openOn</h3>
    <pre class="prettyprint linenums lang-js">
string</pre>
    <div class="well">
        Öffnet eine Infobox bei Klick oder Hover ( <span class="code">"click"</span> oder <span class="code">"hover"</span> ). Wenn nur eine Infobox pro Marker genutzt wird.
    </div>
    <pre class="prettyprint linenums lang-js">"click"</pre>
</div>

<div class="row-fluid level2">
    <h3>options.infoBox.click</h3>
    <pre class="prettyprint linenums lang-js">
string</pre>
    <div class="well">
        Wenn in <span class="code">mapdata.info_box.my_info_box</span> festgelegt wurde, dann wird diese genommen, wenn bei <span class="code">options.infoBox.click="my_info_box_click"</span> steht
    </div>
    <pre class="prettyprint linenums lang-js">false</pre>
</div>

<div class="row-fluid level2">
    <h3>options.infoBox.hover</h3>
    <pre class="prettyprint linenums lang-js">
string</pre>
    <div class="well">
        Wenn in <span class="code">mapdata.info_box.my_info_box</span> festgelegt wurde, dann wird diese genommen, wenn bei <span class="code">options.infoBox.hover="my_info_box_hover"</span> steht
    </div>
    <pre class="prettyprint linenums lang-js">false</pre>
</div>

<div class="row-fluid level2">
    <h3>options.infoBox.centerMapOnShow</h3>
    <pre class="prettyprint linenums lang-js">
boolean</pre>
    <div class="well">
        Zentriert Map beim geöffneten Marker
    </div>
    <pre class="prettyprint linenums lang-js">"click"</pre>
</div>

<div class="row-fluid level2">
    <h3>options.infoBox.closeOnClickOutside</h3>
    <pre class="prettyprint linenums lang-js">
boolean</pre>
    <div class="well">
        Schliesst Infobox, wenn außerhalb dieser geklickt wurde
    </div>
    <pre class="prettyprint linenums lang-js">true</pre>
</div>

<div class="row-fluid level2">
    <h3>options.infoBox.offsetX</h3>
    <pre class="prettyprint linenums lang-js">
integer</pre>
    <div class="well">
        Versetzt die Infobox horizontal um X Pixel
    </div>
    <pre class="prettyprint linenums lang-js">10</pre>
</div>

<div class="row-fluid level2">
    <h3>options.infoBox.offsetY</h3>
    <pre class="prettyprint linenums lang-js">
integer</pre>
    <div class="well">
        Versetzt die Infobox vertikal um X Pixel
    </div>
    <pre class="prettyprint linenums lang-js">-78</pre>
</div>

<div class="row-fluid level2">
    <h3>options.infoBox.disableAutoPan</h3>
    <pre class="prettyprint linenums lang-js">
boolean</pre>
    <div class="well">
        Deaktiviert das Mitwandern der Karte, wenn sich eine Infobox öffnet
    </div>
    <pre class="prettyprint linenums lang-js">false</pre>
</div>

<div class="row-fluid level2">
    <h3>options.infoBox.zIndex</h3>
    <pre class="prettyprint linenums lang-js">
integer</pre>
    <div class="well">
        Z-Index der offenen Infobox
    </div>
    <pre class="prettyprint linenums lang-js">false</pre>
</div>

<div class="row-fluid level2">
    <h3>options.infoBox.boxClass</h3>
    <pre class="prettyprint linenums lang-js">
string</pre>
    <div class="well">
        CSS-Klasse der Infoboxen
    </div>
    <pre class="prettyprint linenums lang-js">"infobox"</pre>
</div>

<div class="row-fluid level2">
    <h3>options.infoBox.boxClickClass</h3>
    <pre class="prettyprint linenums lang-js">
string</pre>
    <div class="well">
        CSS-Klasse der Infoboxen bei Klick
    </div>
    <pre class="prettyprint linenums lang-js">false</pre>
</div>

<div class="row-fluid level2">
    <h3>options.infoBox.boxHoverClass</h3>
    <pre class="prettyprint linenums lang-js">
string</pre>
    <div class="well">
        CSS-Klasse der Infoboxen bei Hover
    </div>
    <pre class="prettyprint linenums lang-js">false</pre>
</div>

<div class="row-fluid level2">
    <h3>options.infoBox.closeBoxMargin</h3>
    <pre class="prettyprint linenums lang-js">
integer</pre>
    <div class="well">
        Abstand vom Close-Image zum Rand der Infobox
    </div>
    <pre class="prettyprint linenums lang-js">0</pre>
</div>

<div class="row-fluid level2">
    <h3>options.infoBox.closeIcon</h3>
    <pre class="prettyprint linenums lang-js">
integer</pre>
    <div class="well">
        Dateiname vom Close Icon
    </div>
    <pre class="prettyprint linenums lang-js">"infobox-close-icon.png"</pre>
</div>

<div class="row-fluid level2">
    <h3>options.infoBox.isHidden</h3>
    <pre class="prettyprint linenums lang-js">
boolean</pre>
    <div class="well">
        Versteckt eine Infobox
    </div>
    <pre class="prettyprint linenums lang-js">false</pre>
</div>

<div class="row-fluid level2">
    <h3>options.infoBox.pane</h3>
    <pre class="prettyprint linenums lang-js">
string</pre>
    <div class="well">
        pane names are the property names for the google.maps.MapPanes object. <a href="https://developers.google.com/maps/documentation/javascript/reference?hl=de#MapPanes" target="_blank"  class="btn btn-xs btn-primary">Google Docu Map Panes</a>
    </div>
    <pre class="prettyprint linenums lang-js">"floatPane"</pre>
</div>

<div class="row-fluid level2">
    <h3>options.infoBox.enableEventPropagation</h3>
    <pre class="prettyprint linenums lang-js">
boolean</pre>
    <div class="well">
        Events in der Infobox <a href="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html" target="_blank" class="btn btn-xs btn-primary">Google Docu Infobox.js</a>
    </div>
    <pre class="prettyprint linenums lang-js">false</pre>
</div>

<div class="row-fluid level2">
    <h3>options.infoBox.isHidden</h3>
    <pre class="prettyprint linenums lang-js">
boolean</pre>
    <div class="well">
        Versteckt eine Infobox
    </div>
    <pre class="prettyprint linenums lang-js">false</pre>
</div>

<div class="row-fluid level2">
    <h3>options.infoBox.content</h3>
    <pre class="prettyprint linenums lang-js">
string</pre>
    <div class="well">
        HTML-Content
    </div>
    <pre class="prettyprint linenums lang-js">false</pre>
</div>

<div class="row-fluid level2">
    <h3>options.infoBox.templates</h3>
    <pre class="prettyprint linenums lang-js">
object</pre>
    <div class="well">
        Templates für die Infobox
    </div>
    <pre class="prettyprint linenums lang-js">{}</pre>
</div>

<div class="row-fluid level3">
    <h3>options.infoBox.templates.triangle</h3>
    <pre class="prettyprint linenums lang-js">
string</pre>
    <div class="well">
        Das Dreieck
    </div>
    <pre class="prettyprint linenums lang-html">&lt;div class=&quot;triangle&quot;&gt;&lt;/div&gt;</pre>
</div>
<div class="row-fluid level3">
    <h3>options.infoBox.templates.heading</h3>
    <pre class="prettyprint linenums lang-js">
string</pre>
    <div class="well">
        Header
    </div>
    <pre class="prettyprint linenums lang-html">&lt;h2&gt;
    %%name%%
&lt;/h2&gt;</pre>
</div>
<div class="row-fluid level3">
    <h3>options.infoBox.templates.text</h3>
    <pre class="prettyprint linenums lang-js">
string</pre>
    <div class="well">
        Textblock
    </div>
    <pre class="prettyprint linenums lang-html">&lt;div class=&quot;text&quot;&gt;
    %%text%%
&lt;/div&gt;</pre>
</div>
<div class="row-fluid level3">
    <h3>options.infoBox.templates.row</h3>
    <pre class="prettyprint linenums lang-js">
string</pre>
    <div class="well">
        Link Row
    </div>
    <pre class="prettyprint linenums lang-html">&lt;a href=&quot;%%src%%&quot; %%external%% class=&quot;map-popover-link&quot;&gt;
    %%text%%
&lt;/a&gt;</pre>
</div>
<div class="row-fluid level3">
    <h3>options.infoBox.templates.footer</h3>
    <pre class="prettyprint linenums lang-js">
string</pre>
    <div class="well">
        Footer
    </div>
    <pre class="prettyprint linenums lang-html">''</pre>
</div>
<div class="row-fluid level3">
    <h3>options.infoBox.templates.xhrBody</h3>
    <pre class="prettyprint linenums lang-js">
string</pre>
    <div class="well">
        Body wenn Ajax
    </div>
    <pre class="prettyprint linenums lang-html">%%content%%</pre>
</div>

<div class="row-fluid">
    <h3>options.templateMapControls</h3>
    <pre class="prettyprint linenums lang-js">
object</pre>
    <div class="well">
        Custom Controls
    </div>
    <pre class="prettyprint linenums lang-js">{}</pre>
</div>

<div class="row-fluid level2">
    <h3>options.templateMapControls.body</h3>
    <pre class="prettyprint linenums lang-js">
string</pre>
    <div class="well">
        Body
    </div>
    <pre class="prettyprint linenums lang-html">&lt;div class=&quot;custom-controls&quot;&gt;
    %%content%%
&lt;/div&gt;</pre>
</div>

<div class="row-fluid level2">
    <h3>options.templateMapControls.move</h3>
    <pre class="prettyprint linenums lang-js">
string</pre>
    <div class="well">
        Karte Bewegen UI
    </div>
    <pre class="prettyprint linenums lang-html">&lt;div class=&quot;move&quot;&gt;
    &lt;a href=&quot;javascript:;&quot; class=&quot;toleft&quot;&gt;&lt;/a&gt;
    &lt;a href=&quot;javascript:;&quot; class=&quot;toright&quot;&gt;&lt;/a&gt;
    &lt;a href=&quot;javascript:;&quot; class=&quot;toup&quot;&gt;&lt;/a&gt;
    &lt;a href=&quot;javascript:;&quot; class=&quot;todown&quot;&gt;&lt;/a&gt;
&lt;/div&gt;</pre>
</div>
<div class="row-fluid level2">
    <h3>options.templateMapControls.zoom</h3>
    <pre class="prettyprint linenums lang-js">
string</pre>
    <div class="well">
        Zoom UI
    </div>
    <pre class="prettyprint linenums lang-html">&lt;div class=&quot;zoom&quot;&gt;
    &lt;a href=&quot;javascript:;&quot; class=&quot;zoom-in&quot;&gt;&lt;/a&gt;
    &lt;a href=&quot;javascript:;&quot; class=&quot;zoom-out&quot;&gt;&lt;/a&gt;
&lt;/div&gt;</pre>
</div>
<div class="row-fluid level2">
    <h3>options.templateMapControls.type</h3>
    <pre class="prettyprint linenums lang-js">
string</pre>
    <div class="well">
        Wechsel zwischen mapTypeId
    </div>
    <pre class="prettyprint linenums lang-js">''</pre>
</div>
                        </div>
                    </div>
                    <div class="panel panel-default" data-element="map-data">
                        <div class="panel-heading">
                            Map Data
                        </div>
                        <div class="panel-body">
<pre class="prettyprint linenums lang-js">
var mapdata = {
   settings:{
      startPoint:{
         lat:52.52019,
         lng:13.40518
      },
      startZoom:13,
      maxZoom:15,
      minZoom:11
   },
   places:[
      {
         name:&quot;Indonesia&quot;,
         coordinates:{
            lat:-0.789275,
            lng:113.921327
         },
         info_box:{
            link:[
               {
                  title:&quot;Read more&quot;,
                  text:&quot;Read more&quot;,
                  src:&quot;&quot;
               }
            ],
            text:&quot;&quot;
         }
      },{
         coordinates:{
            lat:52.51596,
            lng:13.453689
         },
         marker_icon:'marker-customize/marker_a.png',
         info_box:{
           xhr_method   : 'post',
           xhr_src     : 'ajax.html',
           xhr_options : {
               action  : &quot;getmapinfobox&quot;,
               id      : 99,
           },
         }
      },{
         coordinates:{
            lat:52.51596,
            lng:13.453689
         },
         marker_icon:'marker-customize/marker_a.png',
         info_box : {
             hover : {
                link:[
                   {
                      title:&quot;Short&quot;,
                      text:&quot;Short&quot;,
                      src:&quot;&quot;
                   }
                ],
                text:&quot;Das ist die Hover-Infobox. Klicke, um die zweite Infobox anzuzeigen.&quot;
            },
            click : {
                xhr_method  : 'post',
                xhr_src     : 'ajax.html',
                xhr_options : {
                     action  : &quot;getmapinfobox&quot;,
                     id      : 99,
                }
            },
         }
      },
      ...
   ]
}</pre>
                        </div>
                    </div>
                    <div class="panel panel-default" data-element="map-data-reference">
                        <div class="panel-heading">
                            Mapdata Referenz
                        </div>
                        <div class="panel-body reference">
<div class="row">
    <div class="alert alert-info">
        <h3>Attribut</h3>
        <span class="code pl">Datentyp</span>
        <div class="well">
            Defaults existieren nicht für die Map-Daten! Einzig die Settings sind in den <span class="code fat">mapbox.defaults</span> schon gesetzt und können mit <span class="code fat">mapdata.settings</span> überschrieben werden.
            Praktisch kann in  <span class="code fat">mapdata.settings</span> alles, was in  <span class="code fat">mapbox.defaults</span> existiert. Also auch: <span class="code fat">mapdata.settings.infoBox.closeOnClickOutside</span>
            <br />
            <br />
            Map Init Parameter überschreiben Map Defaults<br />
            Map Data Settings überschreiben Map Init Parameter und Map Defaults<br />
            <br />
            Die üblichen Settings die mit der Map mitgegeben werden, sind die Koodinaten und die Zoom-Einstellungen.<br />
        </div>
    </div>
</div>

<div class="row">
    <div class="alert alert-danger">
        <div class="well">
            Achtung! Wenn jQuery den Host bei Ajax-Abfragen auf "file://" auflöst, die Html-Datei also NICHT über einen Webserver aufgerufen wird, sondern direkt aus dem Dateisystem, dann erwartet jQuery XHR striktes XML zurück - und kein Html. jQuery wirft einen Fehler. Darum bitte jede Arbeiten mindestens über einen lokalen V-Host machen.
        </div>
    </div>
</div>

<div class="row-fluid">
    <h3>mapdata.settings</h3>
    <pre class="prettyprint linenums lang-js">
object</pre>
    <div class="well">
        Grundeinstellungen der Karte
    </div>
</div>

<div class="row-fluid level2">
    <h3>mapdata.settings.startPoint</h3>
    <pre class="prettyprint linenums lang-js">
object</pre>
    <div class="well">
        Startpunkt
    </div>
</div>

<div class="row-fluid level3">
    <h3>mapdata.settings.startPoint.lat</h3>
    <pre class="prettyprint linenums lang-js">
float</pre>
    <div class="well">
        Startpunkt Latitude
    </div>
</div>

<div class="row-fluid level3">
    <h3>mapdata.settings.startPoint.lng</h3>
    <pre class="prettyprint linenums lang-js">
float</pre>
    <div class="well">
        Startpunkt Longitude
    </div>
</div>

<div class="row-fluid level2">
    <h3>mapdata.settings.startZoom</h3>
    <pre class="prettyprint linenums lang-js">
int</pre>
    <div class="well">
        Startzoom
    </div>
</div>
<div class="row-fluid level2">
    <h3>mapdata.settings.maxZoom</h3>
    <pre class="prettyprint linenums lang-js">
int</pre>
    <div class="well">
        Maximaler Zoom
    </div>
</div>
<div class="row-fluid level2">
    <h3>mapdata.settings.minZoom</h3>
    <pre class="prettyprint linenums lang-js">
int</pre>
    <div class="well">
        Minimaler Zoom
    </div>
</div>
<div class="row-fluid">
    <h3>mapdata.places</h3>
    <pre class="prettyprint linenums lang-js">
array</pre>
    <div class="well">
        Die Orte
    </div>
</div>
<div class="row-fluid level2">
    <h3>mapdata.places[ ].name</h3>
    <pre class="prettyprint linenums lang-js">
string</pre>
    <div class="well">
        Name, Titel oder Headline
    </div>
</div>
<div class="row-fluid level2">
    <h3>mapdata.places[ ].text</h3>
    <pre class="prettyprint linenums lang-js">
string</pre>
    <div class="well">
        Text
    </div>
</div>
<div class="row-fluid level2">
    <h3>mapdata.places[ ].coordinates</h3>
    <pre class="prettyprint linenums lang-js">
object</pre>
    <div class="well">
        Die Kooridnaten
    </div>
</div>
<div class="row-fluid level3">
    <h3>mapdata.places[ ].coordinates.lat</h3>
    <pre class="prettyprint linenums lang-js">
object</pre>
    <div class="well">
        Latitude
    </div>
</div>
<div class="row-fluid level3">
    <h3>mapdata.places[ ].coordinates.lng</h3>
    <pre class="prettyprint linenums lang-js">
object</pre>
    <div class="well">
        Longitude
    </div>
</div>
<div class="row-fluid level2">
    <h3>mapdata.places[ ].marker_icon</h3>
    <pre class="prettyprint linenums lang-js">
string</pre>
    <div class="well">
        Marker Icon Dateiname
    </div>
</div>
<div class="row-fluid level2">
    <h3>mapdata.places[ ].info_box</h3>
    <pre class="prettyprint linenums lang-js">
object</pre>
    <div class="well">
        Marker Icon Dateiname
    </div>
</div>
<div class="row-fluid level3">
    <h3>mapdata.places[ ].info_box.xhr_method<br />
        mapdata.places[ ].info_box.click.xhr_method<br />
        mapdata.places[ ].info_box.hover.xhr_method
    </h3>
    <pre class="prettyprint linenums lang-js">
string</pre>
    <div class="well">
        POST oder GET
    </div>
</div>
<div class="row-fluid level3">
    <h3>mapdata.places[ ].info_box.xhr_src<br />
        mapdata.places[ ].info_box.click.xhr_src<br />
        mapdata.places[ ].info_box.hover.xhr_src
    </h3>
    <pre class="prettyprint linenums lang-js">
string</pre>
    <div class="well">
        Url
    </div>
</div>
<div class="row-fluid level3">
    <h3>mapdata.places[ ].info_box.xhr_options<br />
        mapdata.places[ ].info_box.click.xhr_options<br />
        mapdata.places[ ].info_box.hover.xhr_options</h3>
    <pre class="prettyprint linenums lang-js">
object</pre>
    <div class="well">
        Post Daten
    </div>
</div>
<div class="row-fluid level3">
    <h3>mapdata.places[ ].info_box.link<br />
        mapdata.places[ ].info_box.click.link<br />
        mapdata.places[ ].info_box.hover.link
    </h3>
    <pre class="prettyprint linenums lang-js">
array</pre>
    <div class="well">
        Links, wird über Template dargestellt
    </div>
</div>
<div class="row-fluid level4">
    <h3>mapdata.places[ ].info_box.link[ ].name<br />
        mapdata.places[ ].info_box.click.link[ ].name<br />
        mapdata.places[ ].info_box.hover.link[ ].name
    </h3>
    <pre class="prettyprint linenums lang-js">
string</pre>
    <div class="well">
        Alt-Tag
    </div>
</div>
<div class="row-fluid level4">
    <h3>mapdata.places[ ].info_box.link[ ].text<br />
        mapdata.places[ ].info_box.click.link[ ].text<br />
        mapdata.places[ ].info_box.hover.link[ ].text
    </h3>
    <pre class="prettyprint linenums lang-js">
string</pre>
    <div class="well">
        Link-Text
    </div>
</div>
<div class="row-fluid level4">
    <h3>mapdata.places[ ].info_box.link[ ].src<br />
        mapdata.places[ ].info_box.click.link[ ].src<br />
        mapdata.places[ ].info_box.hover.link[ ].src
    </h3>
    <pre class="prettyprint linenums lang-js">
string</pre>
    <div class="well">
        Link-Url
    </div>
</div>

                        </div>
                    </div>
                    <div class="panel panel-default" data-element="css">
                        <div class="panel-heading">
                            CSS
                        </div>
                        <div class="panel-body">
<pre class="prettyprint linenums lang-css">
.mapbox {
}
.mapbox .infobox {
    overflow: hidden;
    position: relative;
    margin-top: 20px;
}
.mapbox .infobox img.closebox {
    right: 20px;
    top: 20px;
    border: 0px solid #f00;
}

.mapbox .infobox .triangle {
    margin-top: 10px;
    position: absolute;
    width: 18px;
    height: 56px;
    background: url('../images/infobox-triangle-to-left.png');
}
.mapbox .infobox .inner {
    margin: 10px;
    background: #fff;
    margin-left: 18px;
    min-width: 200px;
    max-width: 300px;
    padding: 20px;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}
.mapbox .infobox .text {
    font-size: 1.2em;
    margin-bottom: 5px;
}
.mapbox .infobox h2 {
    margin: 0;
    margin-bottom: 5px;
    padding: 0;
    white-space: nowrap;
    font-size: 1.6em;
}
.mapbox .infobox a {
    line-height: 2em;
    font-size: 1.2em;
    display: block;
    white-space: nowrap;
    background: url(&quot;../images/arrow-infowindow-right.gif&quot;) left no-repeat;
    color: #000;
    padding-left: 10px;
}
.mapbox .custom-controls {
    opacity: 0;
    position: absolute;
    margin-top: 80px;
    margin-left: 100px;
}
.mapbox .custom-controls .move {
    position: relative;
    width: 69px;
    height: 69px;
    background: url(&quot;../images/map-controls-move.png&quot;) center no-repeat;
}
.mapbox .custom-controls .move a {
    position: absolute;
    display: block;
    width: 22px;
    height: 22px;
}
.mapbox .custom-controls .move .toup {
    left: 50%;
    margin-left: -11px;
}
.mapbox .custom-controls .move .todown {
    left: 50%;
    bottom: 0;
    margin-left: -11px;
}
.mapbox .custom-controls .move .toleft {
    top: 50%;
    margin-top: -11px;
}
.mapbox .custom-controls .move .toright {
    top: 50%;
    margin-top: -11px;
    right: 0;
}
.mapbox .custom-controls .zoom {
    opacity: 0;
    margin-top: 0px;
    left: 50%;
    margin-left: -14px;
    position: relative;
}
.mapbox .custom-controls .zoom-in {
    display: block;
    width: 29px;
    height: 29px;
    background: url(&quot;../images/map-controls-zoom-in.png&quot;) center no-repeat;
}
.mapbox .custom-controls .zoom-out {
    margin-top: 5px;
    display: block;
    width: 29px;
    height: 29px;
    background: url(&quot;../images/map-controls-zoom-out.png&quot;) center no-repeat;
}</pre>
                        </div>
                    </div>
                    
                    
                    
                    
                    
		        </div>
		    </div>
	    </div>
	</body>
	<script>
		$(window).on('ready',function(){
			// pretty print code display
            $('.prettyprint').each(function(){
              //  $(this).text( $(this).html() ).html();
            });
            
            prettyPrint();
		});
		
	</script>
</html>